<template>
  <div class="one_post_main">
    <div class="row block center pt-4 pl-5 ml-1 border-bottom pb-4" style="background-color: whitesmoke">
      <div class="col-md-10">
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="commentContainerPage"
            :page-size="commentContainerSize"
            layout="total, prev, pager, next"
            :total="total">
          <!--          :background="'whitesmoke'" -->
        </el-pagination>
      </div>
      <div class="pt-1 col-md-2" >
        <el-page-header @back="goBack">
        </el-page-header>
      </div>
    </div>
    <div class="row pl-3 pt-4 pb-3 border-bottom">
      <div class="col-md-8">
        <h4>{{post.post_title}}</h4>
      </div>
      <div class="col-md-4" align="right">
        <el-badge :value="this.total" class="item">
          <el-button size="small">评论</el-button>
        </el-badge>
        <el-badge :value="this.post.post_ctr" class="item pl-4" type="primary">
          <el-button size="small">阅读量</el-button>
        </el-badge>
      </div>
    </div>
<!--具体帖子内容-->
    <div class="main pl-3">
<!--      发布人信息-->
      <div class="row post_info border-bottom">
<!--左边楼主信息-->
        <div class="col-md-3" style="background-color: whitesmoke" align="center">
          <div class="row user_img mt-5" style="background-color: white;width:140px;height: 140px;padding: 7px;border-radius: 7px;">
            <img :src="this.show_user_img" alt="..." style="width:140px;height: 140px;border-radius: 7px;">
          </div>
          <div class="text-center pt-3">
            <el-tooltip class="item" effect="dark" placement="bottom">
              <div slot="content" class="p-2">
                <p style="font-size: 18px">身份：{{this.show_user_identity}}</p>
                <div class="user_btn btn" type="btn" @click="change_user">详细信息</div>
<!--                <div class="user_btn btn ml-2" type="btn">关注</div>-->
              </div>

              <a style="color:#3f7e74;font-size: 22px;font-weight: bold"
                 href="javascript:void(0);"
                 @click="change_user">{{this.post.post_user_name}}</a>
            </el-tooltip>
          </div>
        </div>
<!--右边帖子内容和发布信息-->
        <div class="col-md-9 pt-5 pl-5 pr-5 pb-2">
          <img :src="'/api/storage/post_img/'+this.post.user_id+'/'+this.post.post_img"
               v-if="this.post.post_img!='default_post_img.jpg'"
               style="width:70%;height:70%"
               alt="...">
          <p class="content pt-4">{{this.post.post_content}}</p>
          <div class="label pt-5" align="right" style="position: relative;margin-top: 100px">
            <p>
              <i class="fa fa-user pr-1" aria-hidden="true"></i>楼主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="fa fa-clock-o pr-1" aria-hidden="true"></i>更新时间：{{this.post.post_time}}
            </p>
          </div>
        </div>

      </div>
<!--      评论内容-->
      <div class="comment_main">

        <div class="row comment_info border-bottom" v-for="(comment,i) in show_info" :key="i">
          <!--左边评论的人的信息-->
          <div class="col-md-3 pb-5" style="background-color: whitesmoke" align="center">
            <div class="row user_img mt-5" style="background-color: white;width:110px;height: 110px;padding: 7px;border-radius: 7px;">
              <img :src="'/api/storage/user_img/' + comment.img" alt="..." style="width:110px;height: 110px;border-radius: 7px;" >
            </div>
            <div class="text-center pt-3">
              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content" class="p-2">
                  <p style="font-size: 15px" v-if="comment.identity==0">身份：学生</p>
                  <p style="font-size: 15px" v-else-if="comment.identity==1">身份：学长学姐</p>
                  <p style="font-size: 15px" v-else-if="comment.identity==2">身份：老师</p>
                  <div class="user_btn btn" type="btn" @click="change_comment_user(comment.user_id)">详细信息</div>
<!--                  <div class="user_btn btn ml-2" type="btn">关注</div>-->
                </div>

                <a style="color:#3f7e74;font-size: 22px;font-weight: bold"
                   href="javascript:void(0);"
                   @click="change_comment_user(comment.user_id)">{{comment.user_name}}</a>
              </el-tooltip>
            </div>
          </div>
          <!--右边帖子评论内容和发布信息-->
          <div class="col-md-9 pt-5 pl-4 pr-5">
            <div class="">
              <p class="content">{{comment.post_comment_content}}</p>
            </div>
            <div class="label pt-5" style="position: relative;margin-top: 100px">
              <p class="text-right" style="text-align:right">
                <i class="fa fa-user pr-1" aria-hidden="true"></i><span class="" v-model="i">第{{ commentContainerPage*commentContainerSize-commentContainerSize+i+1 }}楼</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <i class="fa fa-clock-o pr-1" aria-hidden="true"></i>更新时间：{{comment.post_comment_time}}
              </p>
            </div>
          </div>
        </div>
        <div class="block center pt-5 pb-5">
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page="commentContainerPage"
              :page-size="commentContainerSize"
              layout="total, prev, pager, next"
              :total="total">
            <!--          :background="'whitesmoke'" -->
          </el-pagination>
        </div>
      </div>
<!--      发表评论-->
      <div class="pl-5 comment_release_main border-top" style="background-color: whitesmoke">
        <div class="row mt-5">
          <div class="col-md-8"><h4 style="font-weight: bold">发表回复</h4></div>
          <div class="col-md-4">
            <span class="text-center" style="font-size: 15px">发贴请遵守<a href="#">嘉庚考研圈协议及“七条底线”</a></span>
          </div>
        </div>
        <div class="pr-5 pt-2">
          <el-input
              type="textarea"
              :rows="10"
              placeholder="请输入100字以内的评论~~~"
              v-model="comment_content">
          </el-input>
        </div>
        <div class="pt-4 pb-5">
          <el-button type="primary" icon="el-icon-search" size="large" @click="submitComment()">发 表</el-button>
        </div>
      </div>

    </div>



    </div>

</template>

<script>
import noInfo from "@/assets/noFile.png";
import {getUser_Basic, judgeUser} from '@/api/User'
import {getPostInfoByPostID,getCommentInfoByPostID,addPostComment,addPostCtrByID} from '@/api/Discussion'


export default {
name: "one_post",
  data() {
    return {
      nullContainer: "暂无回复，快来发布哦~",
      //分页
      commentContainerPage:0, // 分页的数据：当前页数
      commentContainerSize:0, // 分页的数据：每页的数量
      total: 0,
      imgs: {
        noInfo,
      },
      comment_info:[],
      show_info:[],
      post_id:this.$route.query.post_id,
      comment_content:'',
      i:1,
      post:{
        user_id:'',
        post_title:'',
        post_content:'',
        post_time:'',
        post_user_name:'',
        user_img:'',
        post_img:'',
        user_identity:0,
        post_ctr:'',

      },
      show_user_img:'',
      show_user_identity:'',
      ifcheck:'',



    }
  },
  methods:{
    //楼主的个人中心跳转
    change_user(){

      //判断此用户id是否为当前登录用户
      judgeUser({
        user_id:this.post.user_id,
        // token:window.sessionStorage.getItem('token')
      }).then(res => {
        //该用户是当前登录用户，跳转个人中心
        if(res.data.code==1){

          if(this.$router.history.current.path !='/Personal/Person_Note'){
            this.$router.push({path:'/Personal/Person_Note'});
          }
        }
        else{

          if(this.$router.history.current.path !='/User_Main/User_Note') {
            this.$router.push({
              path: '/User_Main/User_Note',
              query: {user_id: this.post.user_id}
            });
          }
        }
      });


    },
    //评论的个人中心跳转
    change_comment_user(user_id){

      //判断此用户id是否为当前登录用户
      judgeUser({
        user_id:user_id,
        // token:window.sessionStorage.getItem('token')
      }).then(res => {
        //该用户是当前登录用户，跳转个人中心
        if(res.data.code==1){

          if(this.$router.history.current.path !='/Personal/Person_Note'){
            this.$router.push({path:'/Personal/Person_Note'});
          }
        }
        else{

          if(this.$router.history.current.path !='/User_Main/User_Note') {
            this.$router.push({
              path: '/User_Main/User_Note',
              query: {user_id: user_id}
            });
          }
        }
      });


    },
    //分页
    getShowComment(){

      this.commentContainerSize=parseInt(4);
      this.show_info = this.comment_info.slice((this.commentContainerPage - 1) * this.commentContainerSize, this.commentContainerPage * this.commentContainerSize);
      this.total=parseInt(this.comment_info.length);

    },
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {

      console.log(`当前页: ${val}`);
      this.commentContainerPage= parseInt(val);
      this.getShowComment();

    },
    //返回上一页
    back(){
      this.$router.go(-1);
    },
    // 获取该帖子评论信息
    init(){

      //当前登录用户
      getUser_Basic({
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        this.ifcheck=res.data.ifcheck;
      });

      //帖子信息
      getPostInfoByPostID({
        post_id:this.post_id
      }).then(res=>{
        //阅读量自增
        this.post.post_ctr=res.data.post_ctr+1;
        //提交增加后的阅读量数据
        this.submit();

        this.post.post_content=res.data.post_content;
        this.post.post_time=res.data.post_time;
        this.post.post_title=res.data.post_title;
        this.post.post_user_name=res.data.user_name;
        this.post.user_id=res.data.user_id;
        this.post.post_img=res.data.post_img;
        this.post.user_img=res.data.img;
        this.show_user_img='/api/storage/user_img/' + this.post.user_img;
        this.post.user_identity=res.data.identity;
        if(this.post.user_identity==2){
          this.show_user_identity='老师';
        }
        else if(this.post.user_identity==1){
          this.show_user_identity='学长学姐';
        }
        else if(this.post.user_identity==0){
          this.show_user_identity='学生';
        }
      });

      //帖子评论信息
      getCommentInfoByPostID({
        post_id:this.post_id
      }).then(res=>{
          this.comment_info=res.data.data;
          this.total=res.data.total;
          this.i=res.data.total;
          this.getShowComment();
      });


    },
    submit(){
      addPostCtrByID({
        post_id:this.post_id,
        post_ctr:this.post.post_ctr
      }).then(res=>{
        if(res.data.code==1){
          console.log("阅读量+1")
        }
      });


    },
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
  //  发表评论 （添加评论）
    submitComment(){


      if(this.ifcheck!=1){

        this.$msg.error("未通过身份审核不可发表评论！");
        return false;
      }

      if(this.comment_content.length==0){
        this.$msg.warning('输入框不能为空！');
        return false;
      }
      if(this.comment_content.length>100){
        this.$msg.warning('评论内容不能超过100字！');
        return false;
      }


      addPostComment({
        post_id:this.post_id,
        post_comment_content:this.comment_content,
        // token: window.sessionStorage.getItem('token')
      }).then(res=>{
        if(res.data.code==1){
          this.$msg.success('发表成功！');
        }else{
          this.$msg.error('发表失败！');
        }

        this.init();
        this.comment_content="";
      });

    },


  },
  created() {

    let _this=this;
    _this.commentContainerPage=parseInt(1);
    _this.init();


  },



}
</script>

<style scoped>
/*头像*/
.user_img{
  overflow: hidden;
}
/*内容样式*/
.content{
  font-size: 17px;
  text-indent: 2em;
  letter-spacing:5px;
}
.el-pagination {
  text-align: center;
}
.user_btn{
  background-color: white;
  font-size: 15px;
  color:#3f7e74;
  font-weight: bold;
}
.user_btn:hover{
  background-color:#3f7e74;
  color:white;
}
</style>
